<!DOCTYPE html>
<html lang="en">
<head>
    <title>家人列表</title>
    <titleType style="display: none">familyList</titleType>
    <%- include('../../_global/baseLibs') %>
    <script type="text/javascript" src="/static/lib/util.js"></script>
</head>
<body>
<section class="page-wrap page-family">
    <!-- header start -->
    <header id="header" class="header-box grey fixed"  >
    <div class="header-content">
        <div class="left-tool">
            <a class="back"><i class="iconfont icon-back"></i></a>
        </div>
        <div class="title">家人列表</div>
        <div class="right-tool runDiv" module="familyAdd">
            <a ><i class="icon-tool-add"></i></a>
        </div>
    </div>
</header>
    <!-- header end -->
    <!--content start-->
    <section class="content">
        <aside class="family-list-box">
            <ul class="default-list" id="family_list">

            </ul>
        </aside>
        <button id="titleBtn" style="width: 100%;height:40px; color: #3082FF;position: fixed;bottom: 0px;display: none;">新增</button>
    </section>
    <!--content end-->
</section>
<script type="text/javascript" >
    var zy_gxlx = $.JkcsZydmUtils.getDict({
        tableName: 'kinship'
        ,keyValue: false
    })

    var page_familyList = (function($, page_familyList) {
        var uri_service_queryList = '/api/gzd/jrlb/queryList';
        var uri_service_queryTx = '/api/gzd/jrlb/queryTx';

        page_familyList.init = function(cfg){
            $("#family_list").on('click', 'li', itemClickHandler);
            $("#titleBtn").on('click', function(){
                $.pageSwitch.goToUrl("family", "familyAdd");
            })
            //页面跳转控制
            $.pageSwitch.clickToUrl(".header-content","family");
            queryFamilyList();
        }

        /*查询家人列表*/
        function queryFamilyList() {
            $.QuickRemote.AjaxJson({
                funcName: uri_service_queryList
                ,callback: function(result){
                    var family_list = $("#family_list");
                    $.each(result, function(index, item){
                        var fItem = createFamilyItem(item);
                        family_list.append(fItem);
                    })
                }
            });
        }

        function createFamilyItem(dataItem){
            var item = $($("#familtItem").html());
            item.data("item", dataItem);
            var xm = dataItem['xm'];
            item.find(".name").html(xm);
            var gxlx = dataItem['gxlx'];
            var gxStr = zy_gxlx[gxlx];
            var html = item.find(".relation").html();
            html = gxStr + html;
            item.find(".relation").html(html);
            var sj = dataItem['sj'];
            html = item.find(".phone").html();
            html = html + sj;
            item.find(".phone").html(html);
            var txid = dataItem['txid'];
            if(!StringUtils.isEmpty(txid)){
                var img = item.find(".img-wrap");
                /*这里可以异步 图片一般与业务互相影响*/
                queryTx(img, txid);
            }
            if(dataItem.mrjzr=="0"){
                item.find(".default-text").html("默认就诊人");
            }
            return item;
        }

        function itemClickHandler(){
            var item = $(this).data('item');
            var jmjbxxid = item['jmjbxxid'];
            $.pageSwitch.goToUrl("family","familyInfo","jmjbxxid=" + jmjbxxid)
        }
        function queryTx(img, txid){
            $.QuickRemote.AjaxJson({
                funcName: uri_service_queryTx
                ,params: {txid: txid}
                ,callback: function(result) {
                    var src = result['src'];
                    if(!StringUtils.isEmpty(src)){
                        $(img).attr("src", src);
                    }
                }
            });
        }

        return page_familyList;
    })(jQuery, {})
</script>
</body>
<script type="text/html" id="familtItem">
    <li>
        <a>
            <div class="item-inner">
                <div class="item-media">
                    <div class="img-wrap">
                        <img class="img-wrap" src="/static/images/family/family-header-pic.png">
                    </div>
                </div>
                <div class="item-content text-wrap">
                    <h4>
                        <span class="name"></span>
                        <span class="relation">
                            <i class="icon-edite"></i>
                        </span>
                    </h4>
                    <p>
                        <span class="phone">手机号：</span>
                        <span class="default-text"></span>
                    </p>
                </div>
            </div>
        </a>
    </li>
</script>
</html>